<style lang="scss" scoped>
  .tools-outline {
    padding:5px 0;
    
  }
  ::v-deep .ivu-select-dropdown {
    max-height: 80vh;
    overflow: auto;
  }
</style>
<template>
  <div class="tools-outline">
    <Button v-if="config.addButton" type="primary" ghost icon="md-add" @click="$emit('handleCreate')">{{lang.add}}</Button>
    <Button v-if="config.batchDeleteButton" @click="$emit('handleDeleteMultiple')" type="error" ghost icon="md-trash" class="ivu-ml-8"
            v-show="selection.length>0">{{lang.batchDelete}}
    </Button>
    <!-- 占位，不然工具条换行，不好看-->
    <Button style="width:1px;margin: 0px;padding: 0px;background-color: transparent;border-color: transparent;" readonly="true"></Button>
    <div class="ivu-inline-block ivu-fr">
      <Tooltip v-if="config.downloadIcon" class="ivu-ml" :content="lang.download" placement="top" transfer>
        <i-link @click.native="$emit('handleDownload')">
          <Icon type="md-download"/>
        </i-link>
      </Tooltip>
      <Tooltip v-if="config.uploadIcon" class="ivu-ml" :content="lang.selectFile" placement="top" transfer>
        <Upload :action="config.uploadUrl" :before-upload="handleUpload">
          <Icon type="ios-cloud-upload-outline"/>
        </Upload>
      </Tooltip>
      <Dropdown v-if="config.tableSizeIcon"  @on-click="$emit('handleChangeTableSize',$event)" trigger="click" transfer>
        <Tooltip class="ivu-ml" :content="lang.density" placement="top" transfer>
          <i-link>
            <Icon type="md-list"/>
          </i-link>
        </Tooltip>
        <DropdownMenu slot="list">
          <DropdownItem name="default" :selected="tableSize === 'default'">{{ lang.default }}</DropdownItem>
          <DropdownItem name="large" :selected="tableSize === 'large'">{{ lang.large }}</DropdownItem>
          <DropdownItem name="small" :selected="tableSize === 'small'">{{ lang.small }}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Tooltip v-if="config.fullscreenIcon" class="ivu-ml" :content="tableFullscreen ? lang.exitFullscreen : lang.fullscreen" placement="top" transfer>
        <i-link @click.native="$emit('handleFullscreen')">
          <Icon :custom="tableFullscreen ? 'i-icon i-icon-exit-full-screen' : 'i-icon i-icon-full-screen'"/>
        </i-link>
      </Tooltip>
      <Tooltip v-if="config.refreshIcon" class="ivu-ml" :content="lang.refresh" placement="top" transfer>
        <i-link @click.native="$emit('handleRefresh')">
          <Icon custom="i-icon i-icon-refresh"/>
        </i-link>
      </Tooltip>
      <Dropdown v-if="config.columnSettingIcon" trigger="click">
        <Tooltip class="ivu-ml" :content="lang.columnSetting" placement="top" transfer>
          <i-link>
            <Icon type="md-options"/>
          </i-link>
        </Tooltip>
        <DropdownMenu slot="list">
          <div class="ivu-p-8">{{lang.columnShow}}</div>
          <Divider size="small" class="ivu-mt-8 ivu-mb-8"/>
          <template v-for="(item,index) in columns">
            <li class="ivu-dropdown-item" :key="item.title" v-if="item.title"
                @click="$emit('changeColumnShow',index)">
              <Checkbox v-model="item.show"></Checkbox>
              <span>{{ item.title }}</span>
            </li>
          </template>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: 'table-tools',
  props:{
    config:{
      default:()=>{
        return {
          addButton:true,
          batchDeleteButton:true,
          downloadIcon:true,
          uploadIcon:true,
          uploadUrl:'/',
          tableSizeIcon:true,
          fullscreenIcon:true,
          refreshIcon:true,
          columnSettingIcon:true
        }
      }
    },
    tableSize:{
      default:()=>{
        return 'default'
      }
    },
    tableFullscreen:{
      default:()=>{
        return false
      }
    },
    columns:{
      default:()=>{
        return []
      }
    },
    selection:{
      default:()=>{
        return []
      }
    }
  },
  computed:{
    lang(){
      return {
        "en-US": {
          default:'default',
          large:'large',
          small:'small',
          exitFullscreen:'exit fullscreen',
          fullscreen:'fullscreen',
          refresh:'refresh',
          columnSetting:'column setting',
          columnShow:'column show',
          density:'density',
          add:'Add',
          batchDelete:'batch delete',
          download:'download',
          selectFile:'select file'
        },
        "zh-CN": {
          default:'默认',
          large:'宽松',
          small:'紧凑',
          exitFullscreen:'退出全屏',
          fullscreen:'全屏',
          refresh:'刷新',
          columnSetting:'列设置',
          columnShow: '列展示',
          density:'密度',
          add:'添加',
          batchDelete: '批量删除',
          download: '下载',
          selectFile:'选择文件'
        },
      }[this.G_Locale]
    },
  },
  methods:{
    handleUpload(file){
      this.$emit('handleUpload ',file)
    }
  }
}
</script>
